import React, { FC, useMemo, useState } from "react"

const UseMemoDemo: FC = () => {
  const [num1, setNum1] = useState(10)
  const [num2, setNum2] = useState(20)

  const changeNum1 = () => {
    setNum1((num1) => num1 + 1)
  }
  const changeNum2 = () => {
    setNum1((num2) => num2 + 1)
  }

  const result = useMemo(() => {
    return num1 + num2
  }, [num1, num2])

  return (
    <div>
      <div>
        <span>{num1}</span>
        <button onClick={changeNum1}>change num1</button>
      </div>
      <div>
        <span>{num2}</span>
        <button onClick={changeNum2}>change num2</button>
      </div>
      <div>{result}</div>
    </div>
  )
}

export default UseMemoDemo
